<template>
    <div class="bgroup-avatar-wrap">
        <template v-if="icon">
            <img class="img" :src="icon" alt="">
        </template>
        <template v-else>
            <template v-if="avatarList.length == 1">
                <img class="img" :src="avatarList[0].icon" alt="">
            </template>
            <template v-else-if="avatarList.length == 2">
                <div class="img-two-wrap img-bg">
                    <img class="img-two" :src="avatarList[0].icon" alt="">
                    <img class="img-two" :src="avatarList[1].icon" alt="">
                </div>
            </template>
            <template v-else-if="avatarList.length == 3">
                <div class="img-three-wrap img-bg">
                    <div class="img-three-first-line">
                        <img class="img-three" :src="avatarList[0].icon" alt="">
                    </div>
                    <div class="img-three-two-line">
                        <img class="img-three" :src="avatarList[1].icon" alt="">
                        <img class="img-three" :src="avatarList[2].icon" alt="">
                    </div>
                </div>
            </template>

            <template v-else-if="avatarList.length == 4">
                <div class="img-three-wrap img-bg">
                    <div class="img-four-first-line">
                        <img class="img-three" :src="avatarList[0].icon" alt="">
                        <img class="img-three" :src="avatarList[1].icon" alt="">
                    </div>
                    <div class="img-three-two-line">
                        <img class="img-three" :src="avatarList[2].icon" alt="">
                        <img class="img-three" :src="avatarList[3].icon" alt="">
                    </div>
                </div>
            </template>

            <template v-else-if="avatarList.length == 5">
                <div class="img-five-wrap img-bg-tline">
                    <div class="img-five-first-line">
                        <img class="img-five" :src="avatarList[0].icon" alt="">
                        <img class="img-five" :src="avatarList[1].icon" alt="">
                    </div>
                    <div class="img-five-two-line">
                        <img class="img-five" :src="avatarList[2].icon" alt="">
                        <img class="img-five" :src="avatarList[3].icon" alt="">
                        <img class="img-five" :src="avatarList[4].icon" alt="">
                    </div>
                </div>
            </template>

            <template v-else-if="avatarList.length == 6">
                <div class="img-five-wrap img-bg-tline">
                    <div class="img-five-first-line">
                        <img class="img-five" :src="avatarList[0].icon" alt="">
                        <img class="img-five" :src="avatarList[1].icon" alt="">
                        <img class="img-five" :src="avatarList[2].icon" alt="">
                    </div>
                    <div class="img-five-two-line">
                        <img class="img-five" :src="avatarList[3].icon" alt="">
                        <img class="img-five" :src="avatarList[4].icon" alt="">
                        <img class="img-five" :src="avatarList[5].icon" alt="">
                    </div>
                </div>
            </template>

            <template v-else-if="avatarList.length == 7">
                <div class="img-seven-wrap img-bg-tline">
                    <div class="img-seven-first-line">
                        <img class="img-seven" :src="avatarList[0].icon" alt="">
                    </div>
                    <div class="img-seven-two-line">
                        <img class="img-seven" :src="avatarList[1].icon" alt="">
                        <img class="img-seven" :src="avatarList[2].icon" alt="">
                        <img class="img-seven" :src="avatarList[3].icon" alt="">
                    </div>
                    <div class="img-seven-three-line">
                        <img class="img-seven" :src="avatarList[4].icon" alt="">
                        <img class="img-seven" :src="avatarList[5].icon" alt="">
                        <img class="img-seven" :src="avatarList[6].icon" alt="">
                    </div>
                </div>
            </template>

            <template v-else-if="avatarList.length == 8">
                <div class="img-seven-wrap img-bg-tline">
                    <div class="img-seven-first-line">
                        <img class="img-seven" :src="avatarList[0].icon" alt="">
                        <img class="img-seven" :src="avatarList[1].icon" alt="">
                    </div>
                    <div class="img-seven-two-line">
                        <img class="img-seven" :src="avatarList[2].icon" alt="">
                        <img class="img-seven" :src="avatarList[3].icon" alt="">
                        <img class="img-seven" :src="avatarList[4].icon" alt="">
                    </div>
                    <div class="img-seven-three-line">
                        <img class="img-seven" :src="avatarList[5].icon" alt="">
                        <img class="img-seven" :src="avatarList[6].icon" alt="">
                        <img class="img-seven" :src="avatarList[7].icon" alt="">
                    </div>
                </div>
            </template>

            <template v-else-if="avatarList.length == 9">
                <div class="img-seven-wrap img-bg-tline">
                    <div class="img-seven-first-line">
                        <img class="img-seven" :src="avatarList[0].icon" alt="">
                        <img class="img-seven" :src="avatarList[1].icon" alt="">
                        <img class="img-seven" :src="avatarList[2].icon" alt="">
                    </div>
                    <div class="img-seven-two-line">
                        <img class="img-seven" :src="avatarList[3].icon" alt="">
                        <img class="img-seven" :src="avatarList[4].icon" alt="">
                        <img class="img-seven" :src="avatarList[5].icon" alt="">
                    </div>
                    <div class="img-seven-three-line">
                        <img class="img-seven" :src="avatarList[6].icon" alt="">
                        <img class="img-seven" :src="avatarList[7].icon" alt="">
                        <img class="img-seven" :src="avatarList[8].icon" alt="">
                    </div>
                </div>
            </template>

            <template v-else>
                <span>{{avatarList.length}}xxx</span>
            </template>
        </template>
    </div>
</template>
<script>
    // import defaultIcon from '../../assets/person_icon.jpg'
    export default {
        data() {
            return {
            }
        },
        props: {
            id: {
                type: [Number,String],
                default: 0
            }
        },
        computed: {
            avatarList() {
                let list = []
                let groupList = this.$store.state.base.groupList
                if (groupList && groupList.length > 0) {
                    let group = groupList.filter((el) => {
                        return el.id == this.id
                    })
                    if (group.length > 0) {
                        let nineps = group[0].nineps
                        if(nineps.length > 0) {
                            for (let i = 0; i < nineps.length; i++) {
                                if (!nineps[i].icon) {
                                    nineps[i].icon = 'http://mwimg.mostonetech.xyz/img/45d90228f6192c41832d5e87d3125136.jpg'
                                }
                            }
                        }
                        return nineps
                    }
                }
                return list
            },
            icon() {
                let icon = ''
                let groupList = this.$store.state.base.groupList
                if (groupList && groupList.length > 0) {
                    let group = groupList.filter((el)=>{
                        return el.id == this.id
                    })
                    if (group.length > 0) {
                        return group[0].group_icon
                    }
                }
                return icon
            }

        },

        methods: {
        },
        mounted() {
        }
    }
</script>
<style lang="less">
    .bgroup-avatar-wrap {
        .img {
            width: 150px;
            height: 150px;
            border-radius: 2px;
            display: block;
            cursor: pointer;
        }
        .img-bg {
            background: #ccc;
            width: 150px;
            height: 150px;
            border-radius: 2px;
            display: block;
            cursor: pointer;
            padding: 4px;
            box-sizing: border-box;
        }
        .img-bg-tline {
            background: #ccc;
            width: 150px;
            height: 150px;
            border-radius: 2px;
            display: block;
            cursor: pointer;
            padding: 2px;
            box-sizing: border-box;
        }
        .img-two-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
        .img-two {
            width: 69px;
            height: 69px;
        }
        }
        .img-three-wrap {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        .img-three-first-line {
            height: 69px;
            display: flex;
            justify-content: center;
        }
        .img-three-two-line {
            height: 69px;
            display: flex;
            justify-content: space-between;
        }
        .img-three {
            width: 69px;
            height: 69px;
        }
        .img-four-first-line {
            height: 69px;
            display: flex;
            justify-content: space-between;
        }

        }
        .img-five-wrap {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        .img-five-first-line {
            height: 47.333333px;
            margin-bottom: 2px;
        }
        .img-five-two-line {
            height: 47.333333px;
        }
        .img-five {
            height: 47.333333px;
            height: 47.333333px;
        }
        .img-five + .img-five {
            margin-left: 2px;
        }
        }
        .img-seven-wrap {
            display: flex;
            flex-direction: column;
        .img-seven-first-line {
            height: 47.333333px;
            display: flex;
            margin-bottom: 2px;
            justify-content: center;
        }
        .img-seven-two-line {
            height: 47.333333px;
            display: flex;
            margin-bottom: 2px;
        }
        .img-seven-three-line {
            height: 47.333333px;
            display: flex;
        }
        .img-seven {
            width: 47.333333px;
            height: 47.333333px;
        }
        .img-seven + .img-seven {
            margin-left: 2px;
        }
        }
    }

</style>
